.ps-radio {
  [type="radio"] {
    position: absolute;
    left: -9999px;

    & + label {
      position: relative;
      display: inline-block;
      padding-left: 28px;
      line-height: 20px;
      color: $gray-dark;
      cursor: pointer;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        content: "";
        background: #fff;
        border: 2px solid $gray-medium;
        @include border-radius(100%);
      }

      &::after {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 10px;
        height: 10px;
        content: "";
        background: $primary;
        @include border-radius(100%);
        @include transition(all .2s ease);
      }
    }

    &:checked + label {
      &::before {
        border: 2px solid $primary;
      }

      &::after {
        opacity: 1;
        transform: scale(1);
      }
    }

    &:not(:checked) + label::after {
      opacity: 0;
      transform: scale(0);
    }

  }
}
